<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="vendor/ddl/viz.js"></script>
    <script type="text/javascript" src="vendor/ddl/full.render.js"></script>
</head>

<body>
<script>
    function getQueryVariable(variable) {
        let query = window.location.search.substring(1);
        let vars = query.split("&");
        for (let i = 0; i < vars.length; i++) {
            let pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }

    function show(text) {
        var viz = new Viz();
        viz.renderSVGElement(text)
            .then(function (element) {
                document.body.appendChild(element);
            })
            .catch(error => {
                // Create a new Viz instance (@see Caveats page for more info)
                viz = new Viz();

                // Possibly display the error
                console.error(error);
            });
    }

    var jobId = getQueryVariable("jobId");
    fetch('/v1/ddl/' + jobId)
        .then(function (response) {
            return response.text();
        })
        .then(function (text) {
            console.log('Request successful', text);
            if (text == '') {
                text = 'digraph G { no_ddl_job }';
            }
            show(text);
        })
        .catch(function (err) {
            console.log('Fetch Error :-S', err);
        });
</script>
</body>
</html>
